<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>进度条示例</title>
<style>
  .progress-bar {
    width: 300px;
    height: 30px;
    border: 1px solid #ccc;
    position: absolute;
    /* overflow: hidden; */
  }
  .progress {
    height: 100%;
    width: 0;
    background-color: #4caf50;
    position: absolute;
    top: 0;
    left: 0;
  }
  .percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
  }
</style>
</head>
<body>
  <div class="progress-bar">
    <div class="progress" id="progress"></div>
    <div class="percent" id="percent">0%</div>
  </div>

  <script>
    function updateProgress(percent) {
      document.getElementById('progress').style.width = percent + '%';
      document.getElementById('percent').innerText = '图片加载'+percent + '%';
    }
    function simulateProgress() {
      let percent = 0;
      const interval = setInterval(function() {
        percent += 1;
        updateProgress(percent);
        if (percent >= 90) {
          clearInterval(interval);
        }
      }, 50); // Adjust interval for smoother animation
    }

    simulateProgress();
  </script>
</body>
</html>